<template>
  <div class="interest-content">
<!--    <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">-->
<!--      <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>-->
<!--    </ul>-->
    <ul>
      <li v-for="(v,i) in topStoryList" :key="v.id">
          <div class="interest-content-hd">
  <!--          <img src="/src/assets/images/article1.png" alt="">-->
            <img :src="v.img" alt="">
            <span>{{ v.name }}</span>
          </div>
        <div @click="goDetails(v)" style="cursor: pointer">
          <h2 class="interest-content-title">{{ v.title }}</h2>
          <div class="interest-content-article">
            {{ v.articleItem }}
          </div>
        </div>
        <div class="interest-content-bt">
          <ul>
            <li>
              <div>
              <el-icon :size="18"><CaretTop /></el-icon>赞成{{ v.favour }}
              </div>
              <div>
              <el-icon :size="18"><CaretBottom /></el-icon>
              </div>
            </li>
            <li>
              <el-icon :size="18"><Comment /></el-icon>
              <span>{{ v.comment }}条评论</span>
            </li>
            <li>
              <el-icon :size="18"><Share /></el-icon>
              <span>分享</span>
            </li>
            <li  @click="dialogVisible = true">
              <el-icon :size="18"><StarFilled /></el-icon>
              <span>收藏</span>
            </li>
            <li @click="v.like =!v.like" :class="v.like? 'approve-like':''">
              <el-icon :size="18"><SuccessFilled /></el-icon>
              <span>{{ v.like?'取消喜欢':'喜欢' }}</span>
            </li>
          </ul>
        </div>
      </li>
    </ul>

    <el-dialog
        v-model="dialogVisible"
        title="添加收藏"
        width="500"
    >
      <span>确定添加收藏?</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>
<script setup>
import {ref} from 'vue'
import {CaretBottom} from "@element-plus/icons-vue";
import {useRouter} from 'vue-router'
const router = useRouter();

const dialogVisible = ref(false);

/**
 * 跳转详情
 * @param v
 */
function goDetails(v) {
  router.push('/details')
}

const topStoryList = ref([
  {
    img: '/src/assets/images/article1.png',
    name: '苗先生',
    title: '为什么是这样的1',
    articleItem: '扭矩就是Nm，可以等效理解为每次燃烧爆炸的推力；转速就是发动机的旋转速度，是一个时间的概念，转速越高，代表单位时间燃烧次数越多，单位时间做工越多。因此实现马力主要就是控制两个变量，扭矩和转速。比如相同的2.0L发动机，在最高功率点的转速和扭矩是不一样的，导致了最大马力不一样。那么为何扭矩和转速会不一样呢？我们慢慢看。',
    id:1,
    favour: 88,
    comment:123,
    like: false
  },
  {
    img: '/src/assets/images/article2.png',
    name: 'sdf第三方',
    title: '为什么是这样的2',
    articleItem: '扭矩就是Nm，可以等效理解为每次燃烧爆炸的推力；转速就是发动机的旋转速度，是一个时间的概念，转速越高，代表单位时间燃烧次数越多，单位时间做工越多。因此实现马力主要就是控制两个变量，扭矩和转速。比如相同的2.0L发动机，在最高功率点的转速和扭矩是不一样的，导致了最大马力不一样。那么为何扭矩和转速会不一样呢？我们慢慢看。',
    id:2,
    favour: 28,
    comment:44,
    like: false
  },
])

</script>
<style scoped>

/*.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list .infinite-list-item {
  display: flex;
  align-items: center;
  //justify-content: center;
  height: 250px;
  background: var(--el-color-primary-light-9);
  margin: 10px;
  //color: var(--el-color-primary);
}
.infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
}*/

.interest-content {
  display: flex;
  flex-wrap: wrap; /*换行*/
}

.interest-content ul {
  list-style: none;
  width: 100%;
  padding: 20px;
}

.interest-content > ul > li {
  border-bottom: 1px solid #dddddd;
  margin-bottom: 10px;
}

.interest-content-hd {
  display: flex;
  flex-wrap: wrap; /*换行*/
  align-items: center;
  cursor: pointer
}

.interest-content-hd img {
  width: 35px;
  height: 35px;
  border-radius: 3px;
}

.interest-content-hd span {
  font-size: 16px;
  font-weight: 600;
  margin-left: 5px;
}

.interest-content-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 40px;
}

.interest-content-article {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 15px;
  line-height: 26px;
}

.interest-content-bt ul {
  list-style: none;
  display: flex;
  padding: 20px 0;
}

.interest-content-bt ul li {
  display: flex;
  align-items: center;
  margin-left: 25px;
  color: #75849A;
  font-size: 14px;
  cursor: pointer;
}

.interest-content-bt ul li i {
  margin-right: 5px;
}

/*喜欢*/
.interest-content-bt .approve-like{
  color: #ee4949;
}

</style>